<template>
	<view class="container">
		<view class="tui-bg-box">
			<image src="/static/images/login/login-background.png" class="tui-bg-img"></image>

			<view class="tui-login-name">登 录</view>
		</view>

		<view class="tui-login-from">

			<button class="tui-button-primary tui-btn-submit" hover-class="tui-button-hover" form-type="submit"
				open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" :loading="btnLoading">
				微信授权手机号登录
			</button>
			<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
				点击"登录"即表示已同意
				<text class="tui-protocol-red" @tap="protocol">《用户协议》</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	const util = require("@/utils/util.js");

	export default {
		data() {
			return {
				disabled: false,
				btnLoading: false,
				code: null,
				type: "primary",

			};
		},
		onShow: function() {
			uni
				.getProvider({
					service: "oauth",
				})
				.then((res) => {
					this.provider = res.find((item) => {
						if (item) return item;
					}).provider[0];

					return uni.login({
						provider: this.provider,
						scopes: "auth_user",
					});
				})
				.then((res) => {
					this.code = res.find((item) => {
						if (item) return item;
					}).code;
				});
		},
		methods: {
			...mapMutations(["login"]),

			onGetPhoneNumber(e) {
				let _this = this

				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权  

					//拒绝授权后弹出一些提示  

				} else { //允许授权  
					console.log(e.detail.encryptedData)
					//e.detail.encryptedData //加密的用户信息  
					//e.detail.iv //加密算法的初始向量  时要用到  
					this.tui.request(
						"/app/user/login",
						"POST", {
							jscode: _this.code,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
						},
						false,
						false,
						false
					).then((res) => {
						if (res.code == 200) {
							uni.setStorageSync("token", res.data.token);
							return this.tui.request(
								"/app/user/info",
								"GET", {

								},
								false,
								false,
								false
							);

						}
					}).then((response) => {
							uni.setStorageSync("userinfo", response.data);
							this.setUserInfo(response.data);
					});
			}
		},
		setUserInfo(state) {
			this.login(state);
			this.tui.toast("登录成功", 2000, true);
			setTimeout(() => {
				uni.reLaunch({
					url: "/pages/tabbar/index/index",
				});
			}, 200);
		},
		protocol: function() {
			uni.navigateTo({
				url: "/pages/doc/protocol/protocol",
			});
		},
	},
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.tui-bg-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding-top: 44rpx;
	}

	.tui-photo {
		height: 138rpx;
		width: 138rpx;
		display: block;
		margin: 10rpx auto 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.tui-login-name {
		width: 128rpx;
		height: 40rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 310rpx auto 0 auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-bg-img {
		width: 100%;
		height: 430rpx;
		display: block;
		position: absolute;
		top: 0;
	}

	.tui-login-from {
		width: 100%;
		padding: 0rpx 45rpx 0 45rpx;
		position:fixed;
		bottom:200rpx;
		box-sizing: border-box;
	}

	.tui-input {
		font-size: 32rpx;
		flex: 1;
		display: inline-block;
		padding-left: 32rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell {
		padding: 27rpx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell::after {
		content: "";
		position: absolute;
		border-bottom: 1rpx solid #e0e0e0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top28 {
		margin-top: 28rpx;
	}

	.tui-btn-class {
		width: 196rpx !important;
		height: 54rpx !important;
		border-radius: 27rpx !important;
		font-size: 28rpx !important;
		padding: 0 !important;
		line-height: 54rpx !important;
	}

	.tui-btn-submit {
		margin-top: 100rpx;
	}

	.tui-protocol {
		color: #333;
		font-size: 24rpx;
		text-align: center;
		width: 100%;
		margin-top: 29rpx;
	}

	.tui-protocol-red {
		color: #f54f46;
	}
</style>
